<!--
  @author mujunlin
  @since 2019/08/15 10:59
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="common/common :: jscss"/>
</head>
<body>
<div class="layui-fluid">

    <blockquote class="layui-crumb">
        <a th:lay-href="|/msg/temp/listByGroupId.action?groupId=${obj.groupId}|">模板管理</a>&nbsp;&nbsp;/&nbsp;
        <zmn th:text="${obj.name}"/>&nbsp;/&nbsp;
        <zmn>消息内容</zmn>
    </blockquote>

    <div class="layui-card">
        <div th:replace="message/_tab::tab"></div>
        <div class="layui-tab layui-tab-brief" th:fragment="tab">
            <ul class="layui-tab-title">
                <li th:class="${type == 1 || type == null ? 'layui-this' : ''}"><a
                        th:href="|/msg/temp/content.action?templateId=${obj.templateId}&type=1|" lay-text="短信">短信</a>
                </li>
                <li th:class="${type == 2 ? 'layui-this' : ''}"><a
                        th:href="|/msg/temp/content.action?templateId=${obj.templateId}&type=2|" lay-text="微信">微信</a>
                </li>
                <li th:class="${type == 3 ? 'layui-this' : ''}"><a
                        th:href="|/msg/temp/content.action?templateId=${obj.templateId}&type=3|" lay-text="支付宝">支付宝</a>
                </li>
                <li th:class="${type == 4 ? 'layui-this' : ''}"><a
                        th:href="|/msg/temp/content.action?templateId=${obj.templateId}&type=4|" lay-text="百度">百度</a>
                </li>
            </ul>
        </div>
        <div class="layui-card-body">
            <form method="POST" action="" class="layui-form" lay-filter="zmn-form">
                <!--用于保存或传值的隐藏表单元素
                   置于form标签内的最上方
                   -->
                <input type="hidden" th:value="${obj.templateId}" name="templateId"/>

                <zmn th:if="${type == 1 || type == null}">
                    <div class="layui-card-header layui-margin-b"><b>短信</b></div>

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">短信内容：</label>
                        <div class="layui-input-inline" style="width:590px">
                            <textarea id="message" name="message" onkeyup="wordStatic(this,'num')"
                                      th:text="${smsTemplate.message}" class="layui-textarea"
                                      placeholder="填写短信内容,变量填写{}" lay-verify="required" lay-verType="tips"
                                      maxlength="255"></textarea>
                            <div style="text-align: right">字数统计：<span id="num" th:text="${smsTemplate.message == null ? 0 : #strings.length(smsTemplate.message)}">0</span>/255个字
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">短信签名：</label>
                        <div class="layui-input-inline" style="width:590px">
                            <input type="text" name="messageMark" placeholder="短信签名" lay-verify="required"
                                   lay-verType="tips" th:value="${smsTemplate.messageMark}"
                                   autocomplete="off" class="layui-input" maxlength="50"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">调用通道：</label>
                        <div class="layui-input-inline">
                            <select lay-filter="way" name="way" lay-search lay-verify="">
                                <option value=""></option>
                                <option value="1" th:selected="${smsTemplate.way == 1}">创蓝</option>
                                <option value="2" th:selected="${smsTemplate.way == 2}">阿里云</option>
                                <option value="3" th:selected="${smsTemplate.way == 3}">掌上通</option>
                            </select>
                        </div>
                        <div id="showType" th:style="${smsTemplate.way == 1 ? '' : 'display: none'}">
                            <div class="layui-input-inline">
                                <select name="messageType">
                                    <option value="1" th:selected="${smsTemplate.messageType == 1}">非变量</option>
                                    <option value="2" th:selected="${smsTemplate.messageType == 2}">变量</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" id="messageAccount" name="messageAccount" placeholder="通道账号"
                                       lay-verType="tips" th:value="${smsTemplate.messageAccount}"
                                       autocomplete="off" class="layui-input" maxlength="50"/>
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" id="messagePwd" name="messagePwd" placeholder="通道密码"
                                       lay-verType="tips" th:value="${smsTemplate.messagePwd}"
                                       autocomplete="off" class="layui-input" maxlength="50"/>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">调用通道ID：</label>
                        <div class="layui-input-inline" style="width:590px">
                            <input type="text" name="wayId" placeholder="短信调用平台对应的ID，不填为调用平台不需要模板" lay-verify=""
                                   lay-verType="tips" th:value="${smsTemplate.wayId}"
                                   autocomplete="off" class="layui-input" maxlength="50"/>
                        </div>
                    </div>
                </zmn>

                <zmn th:if="${type == 2}">
                    <div id="wechats">
                    </div>
                </zmn>

                <zmn th:if="${type == 3}">
                    <div class="layui-card-header layui-margin-b"><b>支付宝</b></div>
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">正文：</label>
                        <div class="layui-input-inline" style="width:590px">
                            <textarea name="alipayMessage" th:text="${aliTemplate.alipayMessage}" class="layui-textarea"
                                      placeholder="填写正文" lay-verify="required" lay-verType="tips"
                                      maxlength="255"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">结束语：</label>
                        <div class="layui-input-inline" style="width:590px">
                            <textarea name="alipayEndMessage" th:text="${aliTemplate.alipayEndMessage}"
                                      class="layui-textarea" placeholder="填写结束语" lay-verify="" lay-verType="tips"
                                      maxlength="50"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">调用ID：</label>
                        <div class="layui-input-inline" style="width:590px">
                            <input type="text" name="alipayTempId" placeholder="调用对应的支付宝模板ID" lay-verify="required"
                                   lay-verType="tips" th:value="${aliTemplate.alipayTempId}"
                                   autocomplete="off" class="layui-input" maxlength="50"/>
                        </div>
                    </div>
                </zmn>

                <zmn th:if="${type == 4}">
                    <div class="layui-card-header layui-margin-b"><b>百度</b></div>
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">正文：</label>
                        <div class="layui-input-inline" style="width:590px">
                            <textarea id="baiduMessage" name="baiduMessage"
                                      onkeyup="wordStatic(this,'baiduMessageNum')"
                                      th:text="${baiduTemplate.baiduMessage}"
                                      class="layui-textarea"
                                      placeholder="填写内容"
                                      lay-verify="required"
                                      maxlength="255"></textarea>
                            <div style="text-align: right">字数统计：<span id="baiduMessageNum"
                                                                      th:text="${baiduTemplate.baiduMessage == null ? 0 : #strings.length(baiduTemplate.baiduMessage)}">0</span>/255个字
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">结束语：</label>
                        <div class="layui-input-inline" style="width:590px">
                            <textarea id="baiduEndMessage" name="baiduEndMessage"
                                      onkeyup="wordStatic(this,'baiduEndMessageNum')"
                                      th:text="${baiduTemplate.baiduEndMessage}"
                                      class="layui-textarea"
                                      placeholder="填写结束语"
                                      maxlength="255"></textarea>
                            <div style="text-align: right">字数统计：<span id="baiduEndMessageNum" th:text="${baiduTemplate.baiduEndMessage == null ? 0 : #strings.length(baiduTemplate.baiduEndMessage)}">0</span>/255个字</div>
                        </div>
                    </div>
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label layui-form-required">百度店铺：</label>-->
<!--                        <div class="layui-input-inline" style="width:300px">-->
<!--                            <input type="text" name="baiduShopId" placeholder="百度店铺"-->
<!--                                   lay-verify="required"-->
<!--                                   th:value="${baiduTemplate.baiduShopId}"-->
<!--                                   autocomplete="off" class="layui-input" maxlength="50"/>-->
<!--                        </div>-->
<!--                    </div>-->

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">百度消息模板id：</label>
                        <div class="layui-input-inline" style="width:300px">
                            <input type="text" name="baiduTempId"
                                   placeholder="调用对应的百度消息模板ID"
                                   lay-verify="required"
                                   th:value="${baiduTemplate.baiduTempId}"
                                   autocomplete="off" class="layui-input" maxlength="50"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">消息类型：</label>
                        <div class="layui-input-inline" style="width:300px">
                            <select lay-filter="sceneType" name="sceneType" lay-search="" >
                                <option th:each="types : ${sceneType}" th:value="${types.value}"
                                        th:selected="${types.value == baiduTemplate.sceneType}"
                                        th:disabled="${types.status == false}"
                                        th:text="${types.text }">
                            </select>
                        </div>
                    </div>

                </zmn>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button lay-submit="" lay-filter="zmn-form-submit" class="layui-btn" id="zmn-form-submit"
                                th:if="${#authPermit.checkPermit('/msg/temp/addEdit.action')}">提交
                        </button>
                        <button type="button" class="layui-btn-primary layui-btn cancleBtn"
                                onclick="zmnLayUtil.closeThisTabs()">取消
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">

    var json = {
        type: [[${type}]],
        wechats: [[${wechats}]],
        wechatApps: [[${wechatApps}]],
    };
    layui.config({
        base: "/static/lay/"
    }).extend({
        index: "lib/index",
        msg_template_content: "message/zmn.msg.template.content",
    }).use(['index', 'msg_template_content']);

</script>
</body>
</html>